<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="jakarta.faces.html"
                xmlns:f="jakarta.faces.core"
                xmlns:ui="jakarta.faces.facelets"
                xmlns:p="primefaces" 
                template="../templates/layout.xhtml">

    <ui:define name="left">
        <div>
            <h:form>
                <p:orderList value="#{indexView.categories}"
                             var="category"
                             responsive="true"
                             controlsLocation="none"
                             itemLabel="#{category}"
                             itemValue="#{category}">
                    <p:ajax event="select" listener="#{indexView.onSelect}" update="ds-blogs"/>

                    <f:facet name="caption">文章分类</f:facet>
                </p:orderList>
            </h:form>
        </div>
    </ui:define>

    <ui:define name="content">
        <h:form prependId="false">
            <p:dataScroller id="ds-blogs" 
                            value="#{indexView.blogs}" 
                            var="blog"
                            scrollHeight="500">
                <div class="mb-1 px-2 py-2 w-auto">
                    <div class="font-medium text-xl text-900">
                        <p:link outcome="blog-details" value="#{blog.title}">
                            <f:param name="id" value="#{blog.id}"/>
                        </p:link>
                    </div>

                    <div class="flex align-items-center text-700 flex-wrap mb-3">
                        <div class="mr-5 flex align-items-center mt-3">
                            <i class="pi pi-user mr-2"/>
                            <span>#{blog.user.username}</span>
                        </div>
                        <div class="mr-5 flex align-items-center mt-3">
                            <i class="pi pi-bars mr-2"/>
                            <span>#{blog.category}</span>
                        </div>
                        <div class="mr-5 flex align-items-center mt-3">
                            <i class="pi pi-clock mr-2"/>
                            <h:outputText value="#{blog.publishTime}">
                                <f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" timeZone="Asia/Shanghai"/>
                            </h:outputText>
                        </div>
                        <div class="flex align-items-center mt-3">
                            <i class="pi pi-comments mr-2"/>
                            <span>#{blog.commentList.size()}</span>
                        </div>
                    </div>
                    <div class="text-900 mb-3">
                        <!--<h:outputText escape="false" value="#{blog.content.substring(0, blog.content.length()>50?50:blog.content.length())}..."/>-->
                        <h:outputText escape="false" value="#{indexView.getFirst(blog.content)}..."/>
                    </div>

                </div>
                <p:divider/>
            </p:dataScroller>
        </h:form>
    </ui:define>

</ui:composition>
